<template>
  <div class="centerBox" v-loading="!dataPart1.length">
    <div class="top">
      <div class="topItem color1">
        <img class="leftItem" src="../assets/homeImg/1.png" />
        <div class="rightItem">
          <span class="font14">对接系统</span>
          <span class="font22">{{ dataCount.djxt }}</span>
        </div>
      </div>
      <div class="topItem color2">
        <img class="leftItem" src="../assets/homeImg/2.png" />
        <div class="rightItem">
          <span class="font14">数据表</span>
          <span class="font22">{{ dataCount.sjb }}</span>
        </div>
      </div>
      <div class="topItem color3">
        <img class="leftItem" src="../assets/homeImg/3.png" />
        <div class="rightItem">
          <span class="font14">数据内容</span>
          <span class="font22">{{ dataCount.sjnr }}</span>
        </div>
      </div>
      <div class="topItem color1">
        <img class="leftItem" src="../assets/homeImg/4.png" />
        <div class="rightItem">
          <span class="font14">总用户</span>
          <span class="font22">{{ dataCount.zyh }}</span>
        </div>
      </div>
    </div>

    <div class="top marginTop24">
      <div class="topItem color5">
        <img class="leftItem" src="../assets/homeImg/5.png" />
        <div class="rightItem">
          <span class="font14">数据标准</span>
          <span class="font22">{{ dataCount.sjbz }}</span>
        </div>
      </div>
      <div class="topItem color1">
        <img class="leftItem" src="../assets/homeImg/6.png" />
        <div class="rightItem">
          <span class="font14">接口服务</span>
          <span class="font22">{{ dataCount.jkfw }}</span>
        </div>
      </div>
      <div class="topItem color7">
        <img class="leftItem" src="../assets/homeImg/7.png" />
        <div class="rightItem">
          <span class="font14">差异数据</span>
          <span class="font22">{{ diffDataTotal }}</span>
        </div>
      </div>
      <div class="topItem color8">
        <img class="leftItem" src="../assets/homeImg/8.png" />
        <div class="rightItem">
          <span class="font14">服务部门</span>
          <span class="font22">{{ depDetails.length }}</span>
        </div>
      </div>
    </div>

    <div class="centerData">
      <div class="profileDataBox">
        <div class="profileDataTitle">数据概况</div>
        <div class="line"></div>
        <div class="profileDatas paddingTop20">
          <div
            class="dataItemBox"
            v-for="(item, key, index) in dataPart1"
            :key="index"
          >
            <span class="font14">{{ item.name }}</span>
            <span class="font24">{{ item.num }}</span>
          </div>
        </div>
        <div class="horizontalLine"></div>
        <div class="profileDatas paddingBottom20">
          <div
            class="dataItemBox"
            v-for="(item, key, index) in dataPart2"
            :key="index"
          >
            <span class="font14">{{ item.name }}</span>
            <span class="font24">{{ item.num }}</span>
          </div>
        </div>
      </div>
      <div class="profileDataBox">
        <div class="profileDataTitle">服务部门</div>
        <div class="line"></div>
        <div class="serParts">
          <div
            class="partItem"
            v-for="(item, index) in depDetails"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div class="tables2">
      <div class="leftTab">
        <div class="dataTable">
          <div class="dataTitle">数据表</div>
          <div class="datasDiscrip">
            <p>数据表名称</p>
            <p>字段总数</p>
          </div>
          <div class="maxBox">
            <vue-seamless-scroll
              :data="dataTable"
              class="seamless-warp"
              :class-option="optionSetting"
            >
              <div
                class="datas"
                v-for="(item, index) in dataTable"
                :key="index"
              >
                <p class="tableTitle">{{ item.tableName }}</p>
                <p>{{ item.fieldNum }}</p>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="dataTable">
          <div class="dataTitle">数据标准</div>
          <div class="datasDiscrip">
            <p>数据表名称</p>
            <p>操作</p>
          </div>
          <vue-seamless-scroll
            :data="dataTable"
            class="seamless-warp"
            :class-option="optionSetting"
          >
            <div class="datas" v-for="(it, index) in tableData" :key="index">
              <p>{{ it.fileName }}</p>
              <div class="btns">
                <!-- <span @click="handleDetail(it.id)">查看</span> -->
                <span @click="uploadFile(it.id, it.fileName)">下载</span>
              </div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>

      <div class="myChart">
        <div class="dataTitle">对接系统</div>
        <div id="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../static/home.css";
import fileDownload from "js-file-download";
import axios from "axios";

export default {
  name: "Home",
  data() {
    return {
      option: {
        // 图表标题
        title: {
          show: false, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
          // text: '"新时代"主题图谱',//主标题文本，'\n'指定换行
          x: "left", // 水平安放位置，默认为左对齐，可选为：
          // 'center' ¦ 'left' ¦ 'right'
          // ¦ {number}（x坐标，单位px）
          y: "bottom", // 垂直安放位置，默认为全图顶端，可选为：
          // 'top' ¦ 'bottom' ¦ 'center'
          // ¦ {number}（y坐标，单位px）
          //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "#ccc", // 标题边框颜色
          borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
          padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
          textStyle: {
            fontSize: 18,
            fontWeight: "bolder",
            color: "#333", // 主标题文字颜色
          },
          subtextStyle: {
            color: "#aaa", // 副标题文字颜色
          },
        },
        backgroundColor: "#fff",
        // tooltip: {},
        animationDurationUpdate: function (idx) {
          // 越往后的数据延迟越大
          return idx * 100;
        },
        animationEasingUpdate: "bounceIn",
        color: ["#fff", "#fff", "#fff"],
        series: [
          {
            type: "graph",
            layout: "force",
            force: {
              repulsion: 150,
              edgeLength: 8000,
            },
            roam: false,
            label: {
              normal: {
                show: true,
              },
            },
            data: [],
          },
        ],
      },
      dataCount: {},
      dataPart1: {},
      dataPart2: {},
      dataTable: [],
      tableData: [],
      djxtData: [],
      school_code: "",
      functionDept: "",
      diffDataTotal: 0,
      depDetails: [],
    };
  },
  computed: {
    optionSetting() {
      return {
        step: 0.15, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  async  created() {
       await this.setLoginLog(); 
       this.getUserInfo()
     this.getDataCount();
     this.getProfileData();
     this.getServiceSectorData();
     this.getFilesData();
     this.getDjxtData();
     this.getDifferenceData();
  },
   mounted() {
     
  },
  methods: {
    async setLoginLog() {
      await this.$get("system/user/success").then((res) => {
        sessionStorage.setItem("school", JSON.stringify(res.data));
        this.school_code = res.data.school_code;
      });
    },
    getFilesData() {
      this.$get("dataCenter/dataCount/getFileList", {
        currentPage: "",
        size: "",
        fileName: "",
      }).then((r) => {
        this.tableData = r.data.records;
      });
    },
    async getUserInfo() {
      this.$get("auth/user").then(r=>{
        // localStorage.setItem('name', r.data.name)
      localStorage.setItem('USER', JSON.stringify(r.data.principal))
      })
    },
    handleDetail(id) {},
    uploadFile(id, fileName) {
      this.$download2(
        "dataCenter/dataCount/downLoadFile",
        { fileId: id },
        fileName
      );
    },
    getDjxtData() {
      this.$get("system/menuLogo/logos").then((r) => {
        let data = null;
        let that = this;
        console.log(r.data.data,'data');
        console.log(that.school_code,'that.school_code');
        if (r.data.data.length) {
          data = r.data.data.filter((v) => {
            return v.schoolCode == that.school_code;
          });
          this.functionDept = data[0].functionDept;
          this.depDetails = this.functionDept.split(",");
        } else {
          this.depDetails = [];
        }
      });
    },
    getChart() {
      var myChart = this.$echarts.init(document.getElementById("chart"));
      myChart.setOption(this.option);
    },
    getDataCount() {
      let that = this;
      this.$get("dataCenter/dataCount/getPart1", {
        // schoolCode: that.school_code,
      }).then((r) => {
        this.dataCount = r.data.data;
      });
    },
    getProfileData() {
      let that = this;
      this.$get("dataCenter/dataCount/getPart2", {
        // schoolCode: that.school_code,
      }).then((r) => {
        this.dataPart1 = r.data.data.slice(0, 3);
        this.dataPart2 = r.data.data.slice(3, 6);
      });
    },
    getServiceSectorData() {
      let that = this;
      this.$get("dataCenter/dataCount/getPart3", {
        // schoolCode: that.school_code,
      }).then((r) => {
        this.dataTable = r.data.data;
        r.data.djxt.forEach((v) => {
          this.option.series[0].data.push({
            name: v,
            value: 23799,
            symbolSize: v.length * 15,
            draggable: true,
            itemStyle: {
              normal: {
                shadowBlur: 10,
                shadowColor: "#7580D9",
                color: "#7580D9",
              },
            },
          });
        });
        this.getChart();
      });
    },
    async getDifferenceData() {
      var params1 = {};
      params1.pageSize = 10;
      params1.pageNum = 1;
      let data1 = 0;
      let data2 = 0;
      let data3 = 0;

      await this.$get("dataCenter/selectDifferenceData", {
        ...params1,
      }).then((r) => {
        data1 = r.data.count;
      });
      await this.$get("dataCenter/financeOffice", {
        ...params1,
      }).then((r) => {
        data2 = r.data.count;
      });
      await this.$get("dataCenter/studentsOffice", {
        ...params1,
      }).then((r) => {
        data3 = r.data.count;
      });
      this.diffDataTotal = data1 + data2 + data3;
    },
  },
};
</script>

<style>
.serParts{
  overflow-y: auto;
}
</style>